
<!DOCTYPE html>
<html>

<head>
<title>Webcam in Cindy JS</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../build/js/Cindy.js"></script>
<script type="text/javascript" src="../../build/js/CindyGL.js"></script>

<style type="text/css">
  html,body { margin: 0px; padding: 0px; }
</style>

<script id="csinit" type="text/x-cindyscript">
video = camera video();
mirror = false;
</script>

    <script id="cskeydown" type="text/x-cindyscript">
      print("pressed key" + keycode());
      if(keycode()==77, mirror = !mirror); //m -> toggle mirror
    </script>
    
<script id="csdraw" type="text/x-cindyscript">
  
  
if (image ready(video),
scale = 1*(10.1+mouse().x);
d = 5;
h = .05*(10.1+mouse().y);
  colorplot(
    z = complex(#); if(mirror, z = -re(z)+i*im(z));
    z = z + 1.5*i;
    h*(imagergb(video, exp(0       -pi/2*i)*d+z*scale) + 
    imagergb(video, exp(2*pi/3*i-pi/2*i)*d+z*scale) + 
    imagergb(video, exp(4*pi/3*i-pi/2*i)*d+z*scale))
  );
);
</script>

</head>

<body>
  <div id="CSCanvas" style="width:100vw; height:100vh"></div>
  <script type="text/javascript">
  
var cdy = CindyJS({
  ports: [{id: "CSCanvas", transform: [{visibleRect: [-10, -10, 10, 10]}]}],
  scripts: "cs*",
  language: "en",
  defaultAppearance: {
  },
  use: ["CindyGL"]
});



</script>

</body>

</html>
